<template>
  <div v-resize="onResize">
    <!-- <div class="ana-detail-title"><a-icon type="forward" />呼吸系统症状</div> -->
    <div style="width: 100%; height: 100%" ref="chart"></div>
  </div>
</template>

<script>
import { ChartUtils } from "@/utils/chart";
import AttrSelect from "../utils/AttrSelect.vue";
import { isString } from "@/utils/utils";

const chartUtils = new ChartUtils();

export default {
  components: { AttrSelect },
  data() {
    return {
      key: "呼吸系统",
      // step: 1 * 24 * 3600,
      tableData: [],
    };
  },
  props: {
    chartData: Array,
    defaultKey: String,
    width: {
      type: Number,
      default: 600,
    },
    height: {
      type: Number,
      default: 300,
    },
  },
  watch: {
    key: function (v, o) {
      this.resetOpt();
    },
    chartData: function (v, o) {
      this.resetOpt();
    },
  },
  methods: {
    async init() {
      chartUtils.dom = this.$refs.chart;
      chartUtils.init();

      let option = this.getOption();
      chartUtils.setOption(option);
    },
    filterFunc(k, v) {
      return isString(v);
    },
    getOption() {
      let data = this.reproject();
      let option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: 50,
            roam: true,
            label: {
              show: true,
              position: "top",
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20,
            },
            data: [
              {
                name: "病例-420102198207199997",
                x: 300,
                y: 300,
              },
              {
                name: "病例-420102198207199999",
                x: 800,
                y: 300,
              },
              {
                name: "病例-420102198207197238",
                x: 550,
                y: 100,
              },
              {
                name: "病例-420102198207196139",
                x: 550,
                y: 500,
              },
            ],
            // links: [],
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                  show: true,
                  formatter: () => {
                    return "在车上会面";
                  },
                },
                lineStyle: {
                  width: 5,
                  curveness: 0.2,
                },
              },
              {
                source: 1,
                target: 0,
                label: {
                  show: true,
                  formatter: () => {
                    return "于家中探望";
                  },
                },
                lineStyle: {
                  curveness: 0.2,
                },
              },
              {
                source: 0,
                target: 2,
                label: {
                  show: true,
                  formatter: () => {
                    return "母子关系，互相照顾";
                  },
                },
              },
              {
                source: 1,
                target: 2,
                label: {
                  show: true,
                  formatter: () => {
                    return "家中探望";
                  },
                },
              },
              {
                source: 1,
                target: 3,
                label: {
                  show: true,
                  formatter: () => {
                    return "聚餐";
                  },
                },
              },
              {
                source: 0,
                target: 3,
                label: {
                  show: true,
                  formatter: () => {
                    return "聚餐";
                  },
                },
              },
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      };
      return option;
    },
    reproject() {
      let data = this.chartData.map((v) => v[this.key]);

      data = data.reduce(function (time, name) {
        if (name in time) {
          time[name]++;
        } else {
          time[name] = 1;
        }
        return time;
      }, {});

      let reproject = [];
      // let tableData = [];
      Object.keys(data).forEach((k) => {
        reproject.push({
          label: k === "undefined" ? "无症状" : k,
          value: data[k],
          rr: (data[k] / this.chartData.length).toFixed(4),
        });
      });
      this.tableData = reproject;
      return reproject;
    },

    resetOpt() {
      let option = this.getOption();
      // console.log(option);
      chartUtils.setOption(option);
    },

    onResize() {
      chartUtils.onResize();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>